<template>
  <a-modal :visible="show" width="60vw" title="技术评价单" :maskClosable="false" :key="show" @cancel="handleClose">
    <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="点评总分(百分制)" prop="start">
            <div style="display: flex; justify-content: start">
              <!-- <a-rate v-model="form.start" allow-half readOnly/> -->
              <div style="margin-left: 15px">{{ form.score }} 分</div>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="推广适用性" prop="start1">
            <div style="display: flex; justify-content: start">
              <a-rate v-model="form.start1" allow-half />
              <div style="margin-left: 15px">{{ form.score1 }} 分</div>
            </div>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="内容完整性" prop="start2">
            <div style="display: flex; justify-content: start">
              <a-rate v-model="form.start2" allow-half />
              <div style="margin-left: 15px">{{ form.score2 }} 分</div>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="指导实用性" prop="start3">
            <div style="display: flex; justify-content: start">
              <a-rate v-model="form.start3" allow-half />
              <div style="margin-left: 15px">{{ form.score3 }} 分</div>
            </div>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="技术先进性" prop="start4">
            <div style="display: flex; justify-content: start">
              <a-rate v-model="form.start4" allow-half />
              <div style="margin-left: 15px">{{ form.score4 }} 分</div>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="点评意见" prop="comments">
            <a-textarea placeholder="简述技术的优缺点等" :auto-size="{ minRows: 3, maxRows: 6 }" v-model="form.comments" :maxLength="500" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-button @click="handleClose">取消</a-button>
      <a-button type="primary" @click="handleOk" :disabled="!disableOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
  data() {
    return {
      show: false,
      form: { score: 5 },
      rules: {
        start: [{ require: true, message: '评分为必填项', trigger: 'blur' }],
        start1: [{ require: true, message: '评分为必填项', trigger: 'blur' }],
        start2: [{ require: true, message: '评分为必填项', trigger: 'blur' }],
        start3: [{ require: true, message: '评分为必填项', trigger: 'blur' }],
        start4: [{ require: true, message: '评分为必填项', trigger: 'blur' }],
        comments: [{ require: true, message: '评价为必填项', trigger: 'blur' }],
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      urls: {
        save: '/hteEngineeTechLibComments/edit',
      },
      disableOk: true,
    }
  },
  computed: {},
  mounted() {},
  methods: {
    open(techId) {
      this.form = {}
      this.disableOk = true
      this.$set(this.form, 'techId', techId)
      this.$set(this.form, 'start', 3.0)
      this.$set(this.form, 'start1', 3.0)
      this.$set(this.form, 'start2', 3.0)
      this.$set(this.form, 'start3', 3.0)
      this.$set(this.form, 'start4', 3.0)
      this.show = true
    },
    handleClose() {
      this.show = false
    },
    async handleOk() {
      // let valid = await this.$refs.ruleForm.validate()
      // if (!valid) {
        this.disableOk = false
        let res = await postAction(this.urls.save, this.form)
        this.disableOk = true
        if (res.success) {
          this.$message.success('评论保存成功')
          this.show = false
          this.$emit('afterComment')
        } else {
          this.$message.error('评论保存失败')
        }
      // }
    },
  },
  watch: {
    form: {
      handler(newV, oldV) {
        if (!this.form.start1) {
          this.$set(this.form, 'start1', 0.0)
        }
        if (!this.form.start2) {
          this.$set(this.form, 'start2', 0.0)
        }
        if (!this.form.start3) {
          this.$set(this.form, 'start3', 0.0)
        }
        if (!this.form.start4) {
          this.$set(this.form, 'start4', 0.0)
        }
        let start =
          parseFloat(this.form.start1 * 6 + this.form.start2 * 4 + this.form.start3 * 6 + this.form.start4 * 4) / 20.0
        this.$set(this.form, 'start', start)
        this.$set(this.form, 'score', start * 20)
        this.$set(this.form, 'score1', this.form.start1 * 6)
        this.$set(this.form, 'score2', this.form.start2 * 4)
        this.$set(this.form, 'score3', this.form.start3 * 6)
        this.$set(this.form, 'score4', this.form.start4 * 4)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>
